<template>
  	<div class="recharge">
        <div class="no-bind" v-show="accountData.is_banded_bank == 0 ? true : false">
          	<p>您还没有绑定银行卡，<a href="javascript:void(0)" class="bth pink-bth" @click="bindCardNow">立即绑定</a></p>
        </div>
        <div class="no-bind" v-show="accountData.is_set_paypassword == 0 && accountData.is_banded_bank == 1 ? true : false">
          	<p>您还没有设置支付密码，<a href="javascript:void(0)" class="bth pink-bth" @click="setpsdNow">立即设置</a></p>
        </div>
        <!-- 提现信息 -->
		<Spin size="large" fix v-show="bankCardLoad"></Spin>
        <div v-show="accountData.is_banded_bank == 1 && accountData.is_set_paypassword == 1">
			<div class="recharge-msg">
				<div class="cont clearfix">
					<div class="left fl">
						<p><label class="ionize">收款人</label>{{cardInfo.name}}</p>
						<p>
							<label class="ionize">银行卡信息</label>
							<a style="color:#495060;cursor:default;" href="javascript:void(0)" class="accountDataStyle">{{cardInfo.bank}}
								&nbsp;&nbsp;
								<span style="font-size:12px;color:#ccc">(限额：{{cardInfo.lower_limit}}——{{cardInfo.upper_limit}})</span>
							</a>
						</p>
						<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" class="Withdraw-label" :label-width="100">
							<FormItem label="提现金额" prop="cashMoney">
								<Input type="text" placeholder="请输入提现金额（人民币）" v-model="formCustom.cashMoney" @on-change="handleInput"></Input>
							</FormItem>
							<span class="Amend" v-show="limit > 0">您还需要<span>{{limit}}</span>打码量才可提现</span>
							<FormItem label="提现密码" prop="cashPsd">
								<Input type="password" v-model="formCustom.cashPsd" style="width:300px"></Input>
							</FormItem>
							<span class="Amend"><a :href="service == '暂无' ? 'javascript:void(0);' : service" target="_blank">忘记密码,请联系客服</a></span>
							<FormItem>
								<Button type="primary" :disabled="limitFlag" @click="_getSubmit('formCustom')">确定</Button>
							</FormItem>
						</Form>
					</div>
				</div>
          	</div>
        </div> 
        <!-- 提现处理界面 -->
        <bindCardComponent :bindCardShow.sync="cardmodalShow"></bindCardComponent>
        <setPayPsdComponent :setPayPsdShow.sync="setmodalShow"></setPayPsdComponent>
	</div>
</template>
<script>
import bindCardComponent from "../../../components/personalCenter/bindCardComponent/bindCardComponent";
import setPayPsdComponent from "../../../components/personalCenter/setPayPsdComponent/setPayPsdComponent";
import { jsonToString } from "@/common/js/jsonToString";
import { mapGetters, mapActions } from "vuex";
export default {
	components: {
		bindCardComponent,
		setPayPsdComponent,
	},
	data() {
		const validatePass = (rule, value, callback) => {
			if (!value) {
				callback(new Error('提现金额不能为空'));
			} else if (value <= 0) {
				callback(new Error('提现金额必须大于0'));
			} else {
				if (value > (+this.cardInfo.upper_limit)||value<(+this.cardInfo.lower_limit)) {
					// 对第二个密码框单独验证
					callback(new Error("限额："+this.cardInfo.lower_limit+"——"+this.cardInfo.upper_limit));
				}
				callback();
			}
		};
		const validatePassCheck = (rule, value, callback) => {
			if (!value) {
				callback(new Error('密码不能为空'));
			} else if (!/^[0-9]{6}$/.test(value)) {
				callback(new Error('请输入6位数正确的密码!'));
			} else {
				callback();
			}
		};
		return {
			formCustom: {
				cashMoney: '',
				cashPsd: '',
			},
			ruleCustom: {
				cashMoney: [{ validator: validatePass, trigger: 'blur' }],
				cashPsd: [{ validator: validatePassCheck, trigger: 'blur' }],
			},
			cardmodalShow: false,
			setmodalShow: false,
			userAccountData: {},
			userBankedData: {},
			cardInfo: {},
			waitDeal: false,
			writeNub: true,

			limit: '', //打码量
			limitFlag: true,
			withdrawLimit: {},
			bankCardLoad: false,
		};
  	},
	computed: {
		...mapGetters(["accountData", "service"])
	},
	created() {
		this.userAccountData = this.accountData;
		if (this.accountData.user_id) {
			this._getNeedBet();
		}
		// JSON.parse(JSON.stringify());
		if (this.accountData.is_banded_bank == 1) {
			this._getBankCard();
		}
    	this.$http.post("?m=api&c=account&a=index", {token:localStorage.getItem("token")}).then(res => {
			console.log(res.data)
			localStorage.setItem("cash_id", res.data.cash_id)
			if (res.data.status == 0) {
				if (res.data.cash_id == 0) {
					this.$router.push({path:'/topUpCenter/withdraw/withdraw'})
				} else {
					this.$router.push({path:'/topUpCenter/withdraw/present'})
				}
			} else {
				this.$Message.error(res.data.ret_msg);
			}
		})
	},
	mounted() {
		
	},
	methods: {
		...mapActions(["SET_ACCOUNT_DATA"]),
		handleInput(e) {
			var text = e.target.value.replace(/[^\d]/g, '').replace(/^0{1,}/g,'');
			setTimeout(()=>{
				this.formCustom.cashMoney = text;
			},20)
        },
		_getNeedBet() {
            let vm = this;
            let params = {};
                params.id = this.accountData.user_id;
                params.token = localStorage.getItem('token');
            vm.$http.post(vm.urlRequest + '?m=api&c=app&a=getNeedBet', params).then(res => {
                if (res.data.status == 0) {
                    vm.limit = res.data.limit;
                    if (vm.limit > 0)  {
                        vm.limitFlag = true;
                    } else {
                        vm.limitFlag = false;
                    }
                }
            }).catch(err => {
                console.log(err)
            })
        },
		bindCardNow: function() {
			this.cardmodalShow = true;
		},
		setpsdNow: function() {
			this.setmodalShow = true;     
		},
		_getBankCard: function() { //获取提现银行卡信息
			var params = {
				token: localStorage.getItem("token")
			};
			this.bankCardLoad = true
			this.$http.post(this.urlRequest + "?m=api&c=cash&a=getBankCard", params).then(res => {
				this.bankCardLoad = false
				if (res.data.status == 0) {
					this.cardInfo = res.data;  //页面初始化获取提现银行卡信息
					this.withdrawLimit = res.data.withdraw_limit
				}				
			});
		},
		_getSubmit(formCustom) {
			this.$refs[formCustom].validate(valid => {
        		if (valid) {
					if (this.withdrawLimit && this.withdrawLimit.withdrwlFee > 0 && (this.withdrawLimit.freeCont <= this.withdrawLimit.withdrwlCont)) {
						this.$Modal.confirm({
							title: '温馨提示',
							content: '您今天提现次数已经超出系统设置的每天免费提现次数限制，继续提现需要额外手续费:'+ this.withdrawLimit.withdrwlFee +'元/次',
							okText: '确定',
							cancelText: '取消',
							onOk: () => {
								this._getCash()
							}
						});
					} else {
						this._getCash()
					}
				}
			})
		},
		_getCash() {
			var params = {
				token: localStorage.getItem("token"),
				bank_id: this.cardInfo.bank_id,
				money: this.formCustom.cashMoney,
				psd: this.formCustom.cashPsd
			};
			console.log(params)
			this.$http.post(this.urlRequest + "?m=api&c=cash&a=cash", params).then(res => {
				if (res.data.status == 0) {
					localStorage.setItem("cash_id", res.data.cash_id)    
					this.writeNub = false;
					this.waitDeal = true;
					this.$router.push({
						path: '/topUpCenter/withdraw/present',
					})
				} else {
					this.$Message.error(res.data.ret_msg);
				}
			});
		},
	},
  	watch: {
		accountData(obj) {
			if (obj) {
				this._getNeedBet();
			}
			if (obj.is_banded_bank == 1) {
				this._getBankCard();
			}
		},
		userAccountData() {
			this.SET_ACCOUNT_DATA({
				Obj: this.accountData
			});
		}
	},
};
</script>
<style scoped>
.limit-tips {
    margin-top: -24px;
	margin-bottom: 0;
}
.limit-tips >>> .ivu-form-item-content {
    font-size: 12px;
    color: #999;
	font-weight: 200;
}
.limit-tips >>> .ivu-form-item-content span {
    margin: 0 4px;
}

.recharge-msg >>> .ivu-btn-primary {
    /* color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0; */
    width: 100px;
}
.recharge {
	position: relative;
}
.Amend {
	color: #2d8cf0;
	font-size: 12px;
	margin-top: -24px;
	float: right;
}
.Amend span {
	color: #D22727;
	margin: 0 3px;
}
.color {
    color: red;
	font-size:7px;
} 
.recharge .recharge-msg .cont .left {
	padding-left: 160px;
}
.recharge .recharge-msg .cont .left p {
	height: auto;
	overflow: hidden;
	margin-bottom: 15px;
}
.pc-cont {
  	padding-top: 0;
}
.pc-bottom .public-title {
  	margin-bottom: 0;
}
.recharge .recharge-msg .cont {
	border: 0;
	height: 250px;
	padding-bottom: 0;
	padding-left: 34px;
}
.pc-bottom .pc-left {
	min-height: 520px !important;
	background-color: red;
}
.pc-bottom .pc-right {
	border: 1px solid #eee;
	min-height: 575px !important;
}
.progressbar {
  	margin-top: 13px;
}
.infostyle {
  	position: relative;
}
.wjpsd {
	position: absolute;
	bottom: -20px;
	font-size: 12px;
	color: #9b9b9b;
	right: 10px;
	cursor: pointer;
}
.recharge .recharge-msg .cont .left {
  	padding-bottom: 10px;
}
.moneystyle {
  	position: relative;
}
.moneyIcon {
	position: absolute;
	width: 20px;
	height: 34px;
	text-align: center;
	line-height: 34px;
	left: 103px;
	color: #48484c;
}
.accountInfoStyle {
	display: inline-block;
	cursor: default;
}
.setpsd {
	color: #9b9b9b;
	font-size: 15px;
	font-family: PingFangSC-Medium;
}
.ionize {
	text-align: right;
	vertical-align: middle;
	float: left;
	font-size: 14px;
	color: #495060;
	padding-right: 12px;
	box-sizing: border-box;
}
.pink-bth {
  	background: #c8313c;
    border-radius: 5px;
    padding: 0 10px;
}
.pink-bth:hover {
	background: #ed3f14;
	color: white;
}
</style>
<style>

</style>



// WEBPACK FOOTER //
// src/components/topUpCenter/withdraw/withdraw.vue